<template>
    <div class="container">

        <div class="title">所有门店</div>
        <div class="shop">
            <div class="shop-item" v-for="(item,index) in shopList" :key="index" @click="toGoods(item)">
                <div class="left">

                </div>
                <div class="right">
                    <div class="shop-name">{{item.name}}</div>
                    <div class="shop-explain"></div>
                </div>
            </div>
        </div>

        <el-button type="primary"  @click="toOrderList()" style="position: fixed;bottom: 50px;right: 500px">查看我的订单</el-button>

    </div>
</template>

<script>
    import {allShop} from '../../../api/common'
    export default {
        name: "ShopList",
        components: {},
        data() {
            return {
                user:{},
                shopList:[],
            }
        },
        created() {
            let userJson = localStorage.getItem('bus-user');
            if (userJson) {
                let user = JSON.parse(userJson);
                this.user = user
                this.queryShop()
            } else {
                this.$message.info("请您重新登陆")
            }

        },
        methods: {
            queryShop(){
                allShop().then(res => {
                    if (res.code == 200) {
                        this.shopList = res.data
                    }else {
                        this.$message.error(res.msg || "查询门店数据失败")
                    }
                })
            },
            toGoods(shop){
                localStorage.setItem("bus-shop",JSON.stringify(shop))
                this.$router.push("/goods")
            },
            toOrderList(){
                this.$router.push("/orderList")
            }
        }
    }
</script>

<style scoped>
    .container{
        width: 70%;
        min-height: 100%;
        height: auto;
        margin-left: 15%;
        background-color: #ffffff;
        position: absolute;
    }
    .title{
        text-align: center;
        font-size: 25px;
        font-weight: bold;
        margin-top: 70px;
        letter-spacing: 10px;
    }
    .shop{
        width: 100%;
        margin-top: 40px;
        margin-bottom: 100px;
        float: left;
    }
    .shop-item{
        margin-left: 10%;
        width: 40%;
        float: left;
        margin-top: 20px;
        cursor: pointer;
    }
    .left{
        float: left;
        width: 100px;
        height: 100px;
        overflow: hidden;
        margin: 10px;
        background-color: #42b983;
    }
    .right{
        float: left;
        margin: 10px;
    }
    .shop-img{
        width: 100px;
        height: 100px;
        overflow: hidden;
    }
    .shop-img:hover{
        transform: scale(1.2);
        transition: all 1s;
    }
    .shop-name{
        font-weight: bold;
        font-size: 18px;
        height: 30px;
    }
    .shop-name:hover{
        color: green;
    }
</style>